<template>
  <q-card-section class="row justify-center">
    <q-form
      class="col-12 col-lg-11 col-xl-9"
      @submit.prevent.stop="addItem"
      @reset="formReset"
      ref="addItem"
    >
      <div class="row q-col-gutter-md">
        <div class="col col-md-6">
          <q-select
            outlined
            dense
            v-model="Select.model"
            :options="Select.options"
            label="所属分类"
            clear-icon="mdi-close"
            clearable
            options-selected-class="text-primary"
            name="CategoryID"
          />
        </div>
        <div class="col col-md-3">
          <q-input
            outlined
            dense
            v-model="Author"
            label="发布者"
            readonly
            name="Author"
          />
        </div>
        <div class="col col-md-3">
          <q-input
            outlined
            dense
            v-model="PublicDate"
            mask="date"
            :rules="['date']"
            name="PublicDate"
          >
            <template v-slot:append>
              <q-icon
                name="mdi-calendar"
                class="cursor-pointer text-primary"
              >
                <q-popup-proxy
                  ref="qDateProxy"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date v-model="PublicDate">
                    <div class="row items-center justify-end">
                      <q-btn
                        v-close-popup
                        label="关闭"
                        color="primary"
                        flat
                      />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-6">
          <q-uploader
            ref="Thumbnail"
            flat
            bordered
            label="上传图片"
            accept=".jpg, image/*"
            max-files="1"
            auto-upload
            class="full-width"
            :factory="uploadThumbnail"
            @uploaded="uploadedInfo"
          />
          <q-input
            class="hidden"
            outlined
            dense
            v-model="Thumbnail"
            label="图片地址"
            name="Thumbnail"
          />
        </div>
        <div class="col col-md-6">
          <q-toggle
            v-model="Status"
            name="Status"
            label="图片是否审核"
            left-label
            class="q-ml-sm"
          />
          <div class="q-field__bottom q-field__messages col">取消审核的图片，不会删除，只是不在前台显示</div>
        </div>
      </div>
      <div class="row">
        <div class="col col-12">
          <q-input
            outlined
            dense
            v-model="ThumbnailName"
            label="图片名称"
            name="ThumbnailName"
            :rules="[val => !!val || '请填写图片名称']"
            class="q-mt-md"
          />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-12 q-pt-md">
          <q-input
            outlined
            dense
            v-model="ThumbnailNote"
            label="图片说明"
            name="ThumbnailNote"
          />
        </div>
      </div>

      <q-separator class="q-my-md" />
      <div class="row q-col-gutter-md">
        <q-space />
        <div class="col col-md-2">
          <q-btn
            label="重置表单"
            type="reset"
            flat
            class="full-width"
          />
        </div>
        <div class="col col-md-2">
          <q-btn
            label="返回列表"
            type="button"
            color="secondary"
            flat
            class="full-width bg-grey-4"
            @click="returnList"
          />
        </div>
        <div class="col col-md-2">
          <q-btn
            label="确定添加"
            type="submit"
            color="white"
            flat
            class="full-width bg-primary"
          />
        </div>
      </div>
    </q-form>
    <!-- 对话框-是否继续添加 -->
    <q-dialog v-model="dialog.addAgain">
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar
            icon="mdi-alert-circle-outline"
            text-color="primary"
          />
          <span class="q-ml-sm">图片添加成功！是否继续添加？</span>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            flat
            label="返回列表"
            v-close-popup
            @click="returnList"
          />
          <q-btn
            flat
            label="继续添加"
            color="primary"
            v-close-popup
            @click="addAgain"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-card-section>
</template>

<script>
import { mapMutations } from 'vuex'

// 定义获取二级分类的参数
const _mCode = {
  mCode: 'TP'
}

export default {
  name: 'PageAddPicture',
  components: {},
  props: {},
  data () {
    return {
      // ---------- 下拉框
      Select: {
        model: null,
        options: [],
        columnName: '',
      },
      Author: this.$store.state.Author,
      PublicDate: '',
      ThumbnailName: '',
      Thumbnail: '',
      ThumbnailNote: '',
      Status: true,
      // ---------- 对话框
      dialog: {
        addAgain: false,
      },
    }
  },
  methods: {
    // 获取当前日期，格式化并赋值给日期控件
    getDateNow() {
      this.PublicDate = this.$utils.initDate(Date.now(), 0, 10)
    },
    // 获取所属分类
    getCategory() {
      this.$api.MColumnOptionParams('GetMColumnList', 'get', _mCode).then (result => {
        // console.log(result)
        this.Select.options = result
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },
    // 上传缩略图
    uploadThumbnail(files) {
      return this.$utils.uploadedIMG()
    },
    // 提取图片地址
    uploadedInfo(info) {
      this.Thumbnail = this.$utils.formatUploadedInfo(info)[0]
    },
    // 添加
    addItem(evt) {
      if ( this.Select.model === null ) {
        this.$utils.notify('请选择图片分类', 'red-8')
      } else {
        const _addItemResult = this.$utils.formatFormData(evt)
        // console.log(_addItemResult)
        this.$api.PicturesData('', 'post', _addItemResult).then( result => {
          // console.log(result)
          if ( result === 'success') {
            this.formReset()
            this.dialog.addAgain = true
          } else if ( result === 'error' ) {
            this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
          }
        }).catch( err => {
          switch (err.response.status) {
            case 401:
              this.unauthorized()
              break
          }
          console.log(err)
        })
      }
    },
    // btn-继续添加
    addAgain() {
      this.dialog.addAgain = false
    },
    // btn-返回列表
    returnList() {
      this.$router.push('/Pictures/Pictures');
    },
    // 重置表单
    formReset() {
      this.Select.model = null
      this.ThumbnailName = ''
      this.getDateNow()
      this.ThumbnailNote = ''
      this.$refs.Thumbnail.reset()
      this.Thumbnail = ''
      this.Status = true
    },
    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }
  },
  mounted() {
    this.getDateNow()
    this.getCategory()
  },
}
</script>
<style scoped>
</style>